<template>
	<view class="e-detail">
		<view class="info-content" :class="[form.class]">
			<image :src="form.img" style="width: 30rpx;height: 30rpx;margin: 0 20rpx;"></image>
			<text>距离规定{{textList[type]}}时间还剩{{form[`${type}Day`] || 0}}天</text>
		</view>
		<equip-detail :form="form" :status="form.class == 'info-w'?typeList[type]:''" className="error"></equip-detail>
		<view class="bg-fff p-x-30 p-t-30 br-10 m-b-30">
			<u-row customStyle="padding-bottom: 20px" v-for="(item, index) in list" :key="index">
				<u-col :span="data.span||'4'" v-for="(data, i) in item" :key="data.name">
					<view class="m-b-20">{{data.name}}</view>
					<view class="f-c">
						<view class="text-e">{{form[data.key] || '--'}}</view>
						<u-tag size="mini" text="查看图片" v-if="data.key == 'chargeDateLitter'||data.key == 'exchangeDateLitter'"
							@click="onPreview(data.key)"></u-tag>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-button type="primary" text="去处理" @click="onSubmit"></u-button>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/request/request.js'
	export default {
		data() {
			return {
				type: '',
				id: '',
				list: [
					[{
							name: '充电周期',
							key: 'chargePeriod',
						},
						{
							span: '5',
							name: '上次充电日期',
							key: 'chargeDateLitter',
						},
						{
							span: '3',
							name: '下次充电日期',
							key: 'nextChargeDateLitter',
						},
					],
					[{
							name: '电池更换周期',
							key: 'exchangePeriod',
						},
						{
							span: '5',
							name: '上次更换日期',
							key: 'exchangeDateLitter',
						},
						{
							span: '3',
							name: '下次更换日期',
							key: 'nextExchangeDateLitter',
						},
					],
				],
				typeList: {
					charge: '待充电',
					exchange: '待更换',
				},
				textList: {
					charge: '充电',
					exchange: '更换电池',
				},
				form: {},
				info: {},
			}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.code || 'charge'
			// this.getDeviceDetail()
			this.getUserInfo()
		},
		onShow() {
			this.getDeviceDetail()
		},
		onPullDownRefresh() {
			this.getDeviceDetail()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 获取设备详情
			async getDeviceDetail() {
				const list = [
					'chargeDate',
					'nextChargeDate',
					'exchangeDate',
					'nextExchangeDate',
					'testDate',
					'nextTestDate',
					'dateOfProduction'
				]
				const res = await this.$api.getDeviceDetailList(this.id)
				this.form = res.data
				list.forEach(item => {
					if (this.form[item]) {
						this.form[`${item}Litter`] = this.form[item].split(' ')[0]
					} else {
						this.form[`${item}Litter`] = null
					}
				})
				if (this.form[`${this.type}Day`] < 15) {
					this.form.img = '/static/icons/wrong.png'
					this.form.class = 'info-w'
					return
				}
				this.form.img = '/static/icons/normal.png'
				this.form.class = 'info-n'
			},
			// 获取登录用户详情
			getUserInfo() {
				const info = uni.getStorageSync('userInfo');
				if (info) {
					this.info = JSON.parse(info)
				}
			},
			// 提交
			onSubmit() {
				uni.navigateTo({
					url: `/pages/om/form?id=${this.form.id}&type=${this.type}`
				})
			},
			onPreview(key) {
				let url = ''
				if (key == 'chargeDateLitter' && this.form.chargeFile) {
					url = baseUrl + '/' + this.form.chargeFile.uploadName
				} else if (key == 'exchangeDateLitter' && this.form.exchangeFile) {
					url = baseUrl + '/' + this.form.exchangeFile.uploadName
				}
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$wrongColor: #D91A1A;
	$normalColor: #09B300;

	.e-detail {
		padding: 30rpx;
		background: linear-gradient(#0e64fe, #F7F8FA); //从上到下
		height: 200px;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.u-col {
			view:first-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #59606A;
			}

			view:last-child {
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.info-w {
		color: $wrongColor;
	}

	.info-n {
		color: $normalColor;
	}

	.info-content {
		font-size: 30rpx;
		line-height: 80rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.wrong {
		font-size: 24rpx;
		background-color: rgba(217, 26, 26, 0.1);
		color: $wrongColor;
		padding: 10rpx;
		border-radius: 5rpx;
	}
</style>